<template>
	<view class="cont">
		<top-navigation @openCallPopu = "openCallPopu"/>
		<!-- <text style="color: #fff;">{{typeCurrent}}</text> -->
		<!--内容 -->
		<qy-home-content :CategoryList="CategoryList" :menuList='menuList' :primetrs='primetrs' :menusIndex="menusIndex"
			@menusIndexFun="menusIndexFun" :typeCurrent="typeCurrent" @menuInfoFun="menuInfoFun" />

		<!-- 口味弹框 -->
		<tastePopu :tasteHomeShow="tasteHomeShow" @tasteHomeShowFun="tasteHomeShowFun" @placeAnOrder='placeAnOrder'
			:menuInfo="menuInfo" @ChooseAFlavorFun="ChooseAFlavorFun" />
		<!-- 购物车 -->
		<view class="ShoppingCart">
			<shopping-cart :primetrs="primetrs" :ShoppingCartTotal="ShoppingCartTotal" @getCategoryDishFun="fetch" />
		</view>
		<!-- 切换语言弹框 -->
		<switch-language-popu />
		<!-- 选择桌号 -->
		<NumberPeople-popu />
		<!-- 热更新弹框 -->
		<update-modal></update-modal>
		<!-- 呼叫服务员 -->
		<callTheServerPopu ref="callPopu"/>
	</view>
</template>

<script>
	import qyHomeContent from '../components/qyHomeContent.vue'
	import tastePopu from '@/components/tastePopu.vue'
	import ShoppingCart from '@/components/ShoppingCart.vue'
	import switchLanguagePopu from "@/components/switchLanguagePopu.vue"
	import NumberPeoplePopu from "@/components/NumberPeoplePopu.vue"
	import updateModal from "@/components/UpdateModal" //热更新弹框
	import callTheServerPopu from "@/components/callTheServerPopu.vue"
	import {
		getCategoryList,
		getCategoryDish,
		getInfoById,
		addDish,
		deleteDish,
		getDishInfoList,
		getSoupInfo,
		getShoppingInfo,
		SendMessage,
		CategoryAddDish,
		getDeskStatus
	} from '@/common/config/api.js'
	import
	userSoket
	from '@/js/useSocket'
	export default {
		mixins: [userSoket],
		components: {
			'qy-home-content': qyHomeContent,
			tastePopu,
			ShoppingCart,
			'switch-language-popu': switchLanguagePopu,
			NumberPeoplePopu,
			updateModal,
			callTheServerPopu
		},
		data() {
			return {
				tasteHomeShow: false,
				// 火锅汤底
				primetrs: {
					soupListCurrent: 1,
					imageInfo1: null, //第一个
					imageInfo2: null
				},
				currentPopuIndex: Number, //当前选择的锅底
				CategoryList: [], //分类列表
				menusIndex: 0, //菜单的index
				menuList: [], //商品列表
				menuInfo: {}, //选择的菜品详情
				tasteTemporary: [], //暂存的口味
				menuListIndex: Number, //暂存的商品下标
				ShoppingCartTotal: {}, //购物车
				

			}
		},
		watch: {
			menuList() {
				console.log('最终改变', this.menuList)
			},
		},
		computed: {
			// 当前选择的分类
			typeCurrent() {
				return this.CategoryList.length > 0?  this.CategoryList[this.menusIndex] : {isSoup :1}
			},
			// 当前已选的锅底
			// primetrsNew(){
			// 	let gdList = []
			// 	this.ShoppingCartList.forEach(item =>{
			// 		if(item.isSoup == 1){
			// 			gdList.push(item)
			// 		}
			// 	})
			// 	return gdList
			// }
		},
		mounted() {
			// 初始化
			this.bus.$on("fetchFun", (v, i) => {
				this.fetch()
			});
			// 打开口味弹框
			this.bus.$on("tasteShowFun", (v, i) => {
				console.log('选择的', i)
				this.menuInfoFun(i, v)
			});
			// 数量减少
			this.bus.$on("ReduceQuantity", (v, i) => {
				this.menuList[i].num--

			});
			// 锅底顶部切换选择
			this.bus.$on("TypePotBottom", (i) => {
				this.primetrs.soupListCurrent = i

				// 切换时初始化选择的火锅底料
				if (this.primetrs.imageInfo1 || this.primetrs.imageInfo1) {
					this.primetrsInit()
					this.fetch()
				}

				// this.TypePotBottomInIt()
			});
			// 火锅底料顶部删除
			this.bus.$on("TypePotBottomDel", (i) => {
				// 删除火锅底料
				this.deleteHotPot(i)
				// if (i == 1) {
				// 	this.primetrs.imageInfo1 = null
				// } else {
				// 	this.primetrs.imageInfo2 = null
				// }
				// this.primetrs.soupListCurrent = i
			});
			// 呼叫服务员
			this.bus.$on('SendMessage', (i) => {
				console.log('发送消息',i)
				this.sendingCall(i)
			})
            // 选择没有sku的菜品
            this.bus.$on('busPlaceAnOrder',(i) =>{
                 console.log('asdasda ',i)
                this.menuInfo = i
                this.addDishFun();//添加菜品
            })
            
			// 口味选择
			// this.bus.$on("tasteSelectFun", (v) => {
			// 	this.tasteHomeShow = v
			// });
		},
		onLoad() {
			this.fetch()
			console.log('多语言', uni.getLocale())
		},
		onShow() {
			this.initSoket()
			this.getDeskStatusFun()
		},
		onHide() {
			this.$bus.$off('fetchFun');
			this.$bus.$off('tasteShowFun');
			this.$bus.$off('ReduceQuantity');
			this.$bus.$off('TypePotBottom');
			this.$bus.$off('TypePotBottomDel');
			this.$bus.$off('SendMessage');
			this.$bus.$off('busPlaceAnOrder')
		},
		methods: {
			fetch() {
				Promise.all([
					// this.getDishInfoListFun(),
					this.getCategoryListFun(),
					this.getSoupInfoFun(),
					this.getShoppingInfoFun()
				]).then(() => {
					this.hideLoading();
				}).catch(error => {
					// this.setPageNetworkError();
					// this.showError(error);
				});
			},
			// 获取已选锅底信息
			getSoupInfoFun() {
				getSoupInfo({
					deskId: this.getDeskId()
				}).then((res) => {
					if (res.length > 0) {
						this.primetrs.soupListCurrent = res[0].isSingle
						this.primetrs.imageInfo1 = res[0]
						this.primetrs.imageInfo2 = res[1]
					} else {
						this.primetrs.imageInfo1 = null
						this.primetrs.imageInfo2 = null
					}
					console.log('已选锅底',this.primetrs)
					// this.CategoryList = res
					// this.getCategoryDishFun()
				}).catch(() => {})
			},
			// // 用户端查看桌位添加菜品列表
			// getDishInfoListFun() {
			// 	getDishInfoList({
			// 		deskId: this.getDeskId()
			// 	}).then((res) => {
			// 		// 先分类区分普通菜品和锅底
			// 		res.forEach(item => {
			// 			if (item.isSoup == 1) {
			// 				console.log('item做完分类', this.ShoppingCartList)
			// 				this.ShoppingCartList.isSoupData.push(item)
			// 			} else {
			// 				this.ShoppingCartList.VDlist.push(item)
			// 			}

			// 		})


			// 	}).catch(() => {})
			// },
			// 获取菜品分类
			getCategoryListFun() {
				getCategoryList({
					data: {
						deskId: this.getDeskId()
					}

				}).then((res) => {
					console.log('获取菜单', res)
					this.CategoryList = res
					this.getCategoryDishFun()
				}).catch(() => {})
			},
			// 获取购物车总金额
			getShoppingInfoFun() {
				getShoppingInfo({
					data: {
						deskId: this.getDeskId()
					}
				}).then((res) => {
					this.ShoppingCartTotal = res

				}).catch(() => {})
			},

			// 获取菜品列表
			getCategoryDishFun() {
				this.menuList = []
				// console.log('this.CategoryList', this.CategoryList[this.menusIndex].id)
				getCategoryDish({
					categoryId: this.CategoryList[this.menusIndex].id,
					deskId: this.getDeskId()
				}).then((res) => {
					this.menuList = res.map(item => {
						// 把分类里面的是否是锅底传进来
						item.isSoup = this.CategoryList[this.menusIndex].isSoup
						return item
					})
					console.log('this.menuList',this.menuList)

					// console.log('typeCurrent', this.typeCurrent)
				}).catch(() => {})
			},

			// 获取菜品详情
			menuInfoFun(e) {
				this.menuListIndex = e
				getInfoById({
					id: this.menuList[e].id,
				}).then((res) => {
					let newobj = res
					// if(!newobj.hjDishFlavorVos) return this.showToast('菜品错误,请联系服务员！')
					if (newobj.hjDishFlavorVos != null) {
						newobj.hjDishFlavorVos.forEach((item, index) => {
							item.hjDishFlavorDetailVos.map((item2, index2) => {
								item2.show = false
								return item2
							})
						})
					}

					// 把分类里面的是否是锅底传进来
					newobj.isSoup = this.menuList[e].isSoup
					this.menuInfo = newobj
					this.tasteHomeShow = true
				}).catch(() => {})
			},
			// 添加下单菜品（锅底）
			addDishFun(t) {
                console.log('xxxx')
				let arr = []
				this.tasteTemporary.forEach(item => {
					arr.push(item.id)
				})
				CategoryAddDish({
					dishId: this.menuInfo.id, //菜品id
					dishMoney: this.menuInfo.price, //菜品的单价
					actuallyMoney: this.menuInfo.price, //实际应收金额
					dishFlavorIds: arr.toString(), //菜品口味关联id
					deskId: this.getDeskId(), //桌位id
					num: this.menuInfo.num + 1,
					isSoup: this.menuInfo.isSoup, // 是否是锅底
					isSingle: t ? this.primetrs.soupListCurrent : '',
				}).then((res) => {
					// this.SelectTheSoupBase(this.menuList[this.menuListIndex])
					this.menuList[this.menuListIndex].num++
					this.showToast(this.$t("showToast.AddedSuccessfully")) //添加成功
					this.tasteHomeShowFun()
					this.fetch() //刷新
					// this.getDishInfoListFun(); //刷新
					// this.getSoupInfoFun()
				}).catch(() => {})
			},
			// 减少已选菜品
			deleteHotPot(e) {
				// let cPId = this.primetrs[`imageInfo${e}`].id
				// console.log('删除----', e, this.primetrs[`imageInfo${e}`])
				deleteDish({
					id: this.primetrs[`imageInfo${e}`].id,
					dishId: this.primetrs[`imageInfo${e}`].dishId,
					dishFlavorIds: this.primetrs[`imageInfo${e}`].dishFlavorIds,
					deskId: this.getDeskId(), //桌位id
				}).then((res) => {
					console.log('删除成功')
					this.fetch()

				}).catch(() => {})
			},

			// 口味选择
			ChooseAFlavorFun(e, i) {
				this.menuInfo.hjDishFlavorVos[e].hjDishFlavorDetailVos.forEach((item, index) => {
					if (i == index) {
						item.show = true
						this.tasteTemporary.push({
							...item
						})
					} else {
						item.show = false
					}
				})
			},
			// 切换左侧菜单
			menusIndexFun(e) {
				this.menusIndex = e
				this.getCategoryDishFun()
			},
			// 关闭弹框
			tasteHomeShowFun(e) {
				this.tasteHomeShow = false
				// 已选择口味清除
				this.tasteTemporary = []
			},
			// 口味弹框选择
			placeAnOrder(e, t) {
				// t: true false /是否是锅底
				console.log(this.primetrs.imageInfo1, this.primetrs.soupListCurrent, this.menuInfo)
				if (this.menuInfo.hjDishFlavorVos != null) {
					for (let i = 0; i < this.menuInfo.hjDishFlavorVos.length; i++) {
						var truthness = this.menuInfo.hjDishFlavorVos[i].hjDishFlavorDetailVos.some(function(element) {
							return element.show;
						});
						// 校验是否有选择
						if (!truthness) {
							this.showToast(this.menuInfo.hjDishFlavorVos[i].showName)
							return
						}
					}
				}
				//  判断是否是单锅并且已经有锅底了
				if (this.primetrs.imageInfo1 && this.primetrs.soupListCurrent === 1 && this.menuInfo.isSoup === 1) {
					this.showToast('请去掉一个锅底再选择！')
					return
				}
				// 判断是否是单锅并且已经有锅底了
				if (this.primetrs.imageInfo1 && this.primetrs.imageInfo2 && this.primetrs.soupListCurrent === 0 && this
					.menuInfo.isSoup === 1) {
					this.showToast('请去掉一个锅底再选择！')
					return
				}
				console.log('锅底',this.primetrs)

				// 添加菜品
				this.addDishFun(t)

			},

			// 添加锅底图片
			SelectTheSoupBase(e) {
				this.getSoupInfoFun()
				// console.log('e', e, this.tasteTemporary)
				// // 处理口味
				// let taste = ''
				// this.tasteTemporary.forEach(item => {
				// 	taste = taste + item.showName
				// })
				// if (this.primetrs.imageInfo1 == null) {
				// 	this.primetrs.imageInfo1 = e
				// 	this.primetrs.imageInfo1.showFlavorName = taste
				// } else if (this.primetrs.imageInfo2 == null) {
				// 	this.primetrs.imageInfo2 = e
				// 	this.primetrs.imageInfo1.showFlavorName = taste
				// }
			},
			// 已经选择的锅底数据初始化
			primetrsInit() {
				this.primetrs.imageInfo1 = null
				this.primetrs.imageInfo2 = null
			},
			sendingCall(e) {
				SendMessage(e).then((res) => {
					// this.showToast('呼叫成功')
				})
			},
			// webSoket消息处理
			soketCall(e) {
				if (e.message === '已清台') {
					uni.reLaunch({
						url: '/pages/home/index'
					})
				}
			},
			// 检查当前状态
			getDeskStatusFun() {
				getDeskStatus().then(res => {
					if (res.data === 2) {
						uni.reLaunch({
							url: '/pages/home/index'
						})
					}
				})
			},
			// 打开呼叫服务员弹框
			openCallPopu(){
				this.$refs.callPopu.openPopu()
			}


			// TypePotBottomInIt() {

			// 	console.log('xxx1111', this.primetrs)
			// 	// if (this.primetrs.imageInfo1) this.BatchDelete(this.primetrs.imageInfo1)
			// 	// this.primetrs.

			// 	// this.primetrs.imageInfo1 = null
			// 	// this.primetrs.imageInfo2 = null
			// },
			// 批量删除
			// BatchDelete(e) {
			// 点击删除弹出左侧菜单栏让他删除
			// console.log('eeee',e);
			// addDish({
			// 	dishId: e.dishId,
			// 	dishMoney: e.dishMoney,
			// 	actuallyMoney: e.actuallyMoney,
			// 	dishFlavorIds: e.dishFlavorIds,
			// 	num: 0,
			// 	deskId: this.getDeskId(),
			// 	isSoup: e.isSoup
			// }).then((res) => {
			// 	// if (res.hjOrderDetailVos) {
			// 	// 	// 先分类区分普通菜品和锅底
			// 	// 	res.forEach(item => {
			// 	// 		if (item.isSoup == 1) {
			// 	// 			this.ShoppingCartList.isSoupData.push(item)
			// 	// 		} else {
			// 	// 			this.ShoppingCartList.VDlist.push(item)
			// 	// 		}
			// 	// 	})
			// 	// }
			// 	// this.pageStatus = ''

			// }).catch(() => {})
			// }
		}
	}
</script>

<style>
	page {
		background-color: #161618;
	}

	.cont {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.ShoppingCart {
		position: absolute;
		bottom: 47upx;
		right: 34px;
		color: red;
		z-index: 99;
	}
</style>